<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>Journey through Space: A 3rd grade science learning module</title>
        <script src="scripts/SCORM_API_wrapper.js" language="javascript"></script>
        <script src="scripts/sessionstorage.1.4.js" language="javascript"></script>
        <script src="scripts/scripts.js" language="javascript"></script>
        <script src="scripts/moonhsscripts.js" language="javascript"></script>
        <link href="styles/styles.css" type="text/css" rel="stylesheet"/>
        <link href="styles/hsstyles.css" type="text/css" rel="stylesheet"/>
    </head>
    
    <body onload="javascript:visitMoon()">
        <div>
            <div>
                <table id="indextable">
                    <tr>
                        <td align="center"><img src="images/mercurytoon.png" height="20px" width="20px"/></td>
                        <td align="center"><img src="images/venustoon.png" height="20px" width="20px"/></td>
                        <td align="center"><img src="images/earthtoon.png" height="20px" width="20px"/></td>
                    </tr>
                        <td align="center"><img src="images/marstoon.png" height="20px" width="20px"/></td>
                        <td align="center"><img src="images/suntoon.png" height="20px" width="20px"/></td>
                        <td align="center"><img src="images/jupitertoon.png" height="20px" width="20px"/></td>
                    <tr>
                        <td align="center"><img src="images/saturntoon.png" height="20px" width="45px"/></td>
                        <td align="center"><img src="images/uranustoon.png" height="20px" width="30px"/></td>
                        <td align="center"><img src="images/neptunetoon.png" height="20px" width="20px"/></td>
                    </tr>
                </table>
            </div>
                            
            <div id="headerimage">
                <a name="top">
                <img src="images/header.jpg"
                    alt="image of module title - Journey through Space: a 3rd grade science learning module"
                    title="image of module title - Journey through Space: a 3rd grade science learning module"
                    width="82%"/>
                </a>
            </div>
        </div>
        
        <div id="nav">
            <div id="nav_wrapper">
                <ul>
                    <li><a class="show" href="welcome.html">Welcome!</a>
                    </li>
                    <li><a class="show" href="sun.html">The Sun</a>
                    </li>
                    <li><a class="show" href="#">Rocky Planets</a>
                        <ul>
                            <li><a class="show" href="terresterial.html">Rocky Planet Intro</a>
                            </li>
                            <li><a class="show" href="mercury.html">Mercury</a>
                            </li>
                            <li><a class="show" href="venus.html">Venus</a>
                            </li>
                            <li><a class="show" href="earth.html">Earth</a>
                            </li>
                            <li><a class="show" href="mars.html">Mars</a>
                            </li>
                            <li><a class="show" id="terresterialquizlink" href="terresterialquiz.html">Rocky Planets Quiz</a>
                            </li>
                        </ul>
                    </li>
                    <li><span class="menu-link-inactive" class="show" href="moon.html">The Moon</span>
                    </li>
                    <li><a class="show" href="asteroid.html">Asteroid Belt</a>
                    </li>
                    <li><a class="show" href="#">Gas Giants</a>
                        <ul>
                            <li><a class="show" href="gaseous.html">Gas Giants Intro</a>
                            </li>
                            <li><a class="show" href="jupiter.html">Jupiter</a>
                            </li>
                            <li><a class="show" href="saturn.html">Saturn</a>
                            </li>
                            <li><a class="show" href="uranus.html">Uranus</a>
                            </li>
                            <li><a class="show" href="neptune.html">Neptune</a>
                            </li>
                            <li><a class="hide" id="gaseousquizlink" href="gaseousquiz.html">Gas Giants Quiz</a>
                            </li>
                        </ul>
                    </li>
                    <li> <a class="hide" id="finalquizlink" href="endquiz.html">Final Quiz</a>
                    </li>
                    <li> <a class="hide" id="certificate" href="certificate.html">Certificate</a>
                    </li>
                </ul>
            </div>
            <!-- Nav wrapper end -->
        </div>
        <!-- Nav end -->
        
        <div>
            <article>
                <header>
                    <table align="center">
                        <tr>
                            <th><img src="images/boyastro.jpg" height="50px" width="50px"/></th>
                            <th><h1>The Moon: Orbits around the Earth</h1></th>
                            <th><img src="images/girlastro.jpg" height="50px" width="50px"/></th>
                        </tr>
                    </table>
                </header>
                
                <aside>
                    <table>
                        <tr>
                            <img src="images/moon.jpg"
                                alt="Earth's moon."
                                title="Earth's moon."/>
                        </tr>
                        <tr>
                            <p>Earth's Moon helps to control life on Earth including the ocean's tides.</p>
                        </tr> 
                        <tr>
                            <img src="images/moon2.jpg"
                                alt="Moon Craters"
                                title="Moon Craters"/>
                        </tr>
                        <tr>
                            <p>The craters on the Moon were caused by impacts from space debris.</p>
                        </tr>
                         
                    </table>
                </aside>
                
                <section>
                    <div class="center">
                        <img src="images/mooncomic.png"
                            alt="Introduction comic to the Moon page."
                            title="Introduction comic to the Moon page."/>
                        <br/>
                        <audio controls>
                            <source src="audio/moon.mp3" type="audio/mpeg">
                            <source src="audio/moon.ogg" type="audio/ogg">
                            <source src="audio/moon.wav" type="audio/wav">
                        </audio>
                    </div>
                    
                    <h3>The Moons Miraculous Vocabulary</h3>
                        <p>Hover your mouse over each item to learn its definition.</p>
                            <div id="hotspots">
                                <div class="column">
                                    <div id="hs1" class="hotspot" 
                                        onmouseover="javascript:showText( 1 )"
                                        onmouseout="javascript:hideOutput()"><p>Soundwaves</p></div> 
                                </div>
                            </div>
                            
                            <div id="output">
                                <div id="output-box">
                                    <p id="output-text">asdf</p>
                                </div>
                            </div>
                        
                        <!--<ul>
                            <li><strong>Soundwaves:</strong> A wave of compression and rarefaction, by 
                                which sound is propagated in an elastic medium such as air.</li>
                        </ul>-->
                    
                    <p>Welcome to the Moon! Do you have your oxygen mask and space gear? If so, then you 
                        are ready to bounce on the surface of the Moon. There is 0% gravity here which 
                        means you are bascially weightless. On the Moon you can float from spot to spot 
                        which gives you the feeling of flying.</p>
                    
                    <h3>Interesting Facts</h3>
                        <ul>
                        	<li>The Moon is the brightest object in the night sky, but it does not produce 
                        	    its own light. What we see from Earth is actually the Sun’s reflection 
                        	    bouncing off the Moon's surface.</li>
                            <li>The average temperature is 107 degrees Celsius during the day and roughly 
                                -153 degrees Celsius at night.
                            <li>The Moon does not have atmosphere which makes it impossible for humans 
                                to breath without a space suit.</li>
                            <li>It is made of igneous rock and has a small inner iron core.</li>
                            <li>Its gravitational pull is large enough to effect the water on the 
                                Earth causing tides in the oceans.</li>
                            <li>Gravity on the Moon is only 1/6th that of Earth. This causes things to 
                                seem really light and also effects <em>soundwaves</em> causing them not 
                                travel. This makes the Moon really quiet.</li>
                            <li>The surface of the Moon is covered with <em>craters</em> that were left 
                     		    by collisions with meteors and asteroids.</li>
                     		<li>The Moon orbits so close to Earth that we can observe some of the 
                                details with or without the use of a telescope, including its phases.</li>
                        </ul>
                         
                    <h3>The Phases of the Moon</h3>
                        <table>
                            <tr>
                                <img src="images/moonphases.jpg"
                                    alt="Phases of the Moon"
                                    title="Phases of the Moon"/>
                            </tr>
                            <tr>
                                <p>The Moon has different phases that are visable from Earth. Each phase 
                                    of the Moon is passed through once per Earth month.</p>
                            </tr>
                        </table>
                      
                     <h3>History between the Moon and Humans</h3>  
                        <p>The first trip to the Moon by humankind was on July 20, 1969. Neil 
                            Armstrong was the first man to ever walk on the surface of the Moon. When 
                            Armstrong put his foot on the Moon his first words were:
                            "That's one small step for a man, one giant leap for mankind." Since then 
                            astronauts have continued venturing out into space in order to learn more 
                            about the solar system in which we live in. The Moon is a great practice site 
                            for astronauts to visit in hopes that one day mankind will make it to another 
                            planet.</p>
                
                    <a href="#top">Back to top</a>
                </section>
            </article>
        </div>
        
        <div>
            <footer>
                <cite>All information was collected from 
                    <a href="http://www.merriam-webster.com">Merriam Webster Online: 
                        Dictionary and Thesaurus</a>, 
                    <a href="http://www.nationalgeographic.com/">National Geographic</a>, 
                    <a href="http://www.wikipedia.org">Wikipedia</a>, 
                    <a href="http://www.nasa.gov">NASA</a>, 
                    Etsy - Pretty Grafik Design</a>, &amp Etsy - Paula Kim Studio</a>
                </cite>
            </footer>
        </div>
    </body>
</html>
